<script lang="ts">
  import { createEventDispatcher } from "svelte"
  const dispatch = createEventDispatcher()
  let input: HTMLInputElement
  const addTodo = () => {
    if (input.value.trim() === "") return
    dispatch("addTodoEvent", input.value)
    input.value = ""
  }
</script>

<header>
  <input type="text" bind:this={input} />
  <button on:click={addTodo}>添加</button>
</header>

<style>
  button {
    margin-left: 20px;
  }
</style>
